<template>
  <view class="container">
    <view class="info-tip">
      {{
        isOrderType == 1
          ? '请先完善企业联系人信息，再生成电子合同。'
          : '当前渠道订单的已排车辆未与企橙系统的车辆进行匹配，请先完成车辆匹配后再生成电子合同。'
      }}
    </view>
    <view class="order-create-content">
      <!-- 订单基础信息 -->
      <view class="basic-info">
        <ve-form :model="form" ref="formRef" :rules="rules">
          <ve-card>
            <!-- 企业用户 -->
            <template v-if="isOrderType == 1">
              <ve-form-item prop="linkman" label="企业联系人姓名" required :borderBottom="true">
                <ve-input placeholder="请输入" v-model="form.linkman" :maxlength="20" />
              </ve-form-item>
              <ve-form-item prop="mobile" label="联系人手机号" required :borderBottom="true">
                <ve-input placeholder="请输入" v-model="form.mobile" :maxlength="11" />
              </ve-form-item>
            </template>
            <!-- 个人用户 -->
            <template v-else>
              <ve-form-item prop="channelModelName" label="OTA渠道车辆信息" :borderBottom="true">
                <ve-input disabled v-model="form.channelModelName" />
              </ve-form-item>
              <ve-form-item prop="channelCarLicenseNo" label="渠道车牌号" :borderBottom="true">
                <ve-input disabled v-model="form.channelCarLicenseNo" />
              </ve-form-item>
              <ve-form-item prop="carLicenseNo" label="商户车牌号" required :borderBottom="true">
                <remote-select type="licenseNo" v-model="form.carLicenseNo" :label="form.carLicenseNo" @change="changeLicenseNo" />
              </ve-form-item>
            </template>
            <ve-toast ref="toast" />
          </ve-card>
        </ve-form>
      </view>
    </view>
    <!-- 底部 footer -->
    <ve-bottom-box>
      <ve-button type="primary" @click="submitFn" style="width: 100%">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref, provide, computed, nextTick } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('shortOrderDict')
  import { getShortOrdrDetailsAPI, channelCarLicenseDetail, saveLicense, editOrderCarInfo } from '@/api/order/sOrder'
  import { getOrdrDetailsAPI } from '@/api/order/lOrder'
  import { clientInfoDetail, editClientInfo } from '@/api/market/member'
  import useFormFold from '@/hooks/useFormFold'
  import { onLoad } from '@dcloudio/uni-app'
  import useToast from '@/hooks/useToast'
  provide('dict', dict)

  // 表单对象
  const form = ref({})
  // 企业/个人用户标识
  const isOrderType = ref(1)
  // 订单类型 2、短租 3、长租
  const orderType = ref(2)
  // 表单规则
  const rules = ref({
    mobile: [
      { required: true, message: '请输入联系电话' },
      { len: 11, match: /^[0-9]+$/, message: '仅支持数字，长度11位' },
    ],
    linkman: { required: true, message: '请输入承租人' },
    carLicenseNo: { required: true, message: '请选择商户车牌号' },
  })
  // 等待 customer 组件接口调用完成
  // 确认事件
  // formRef
  const formRef = ref()
  const okLoading = ref(false)
  // 选择车牌号
  const changeLicenseNo = (a, option = {}) => {
    form.value.carLicenseNo = option.licenseNo
    form.value.carId = option.id
    form.value.modelId = option.modelId
    form.value.modelName = option.modelName
  }
  const submitFn = () => {
    formRef.value.validate((valid, errors) => {
      if (valid) {
        handleSubmit()
      }
    })
  }
  // 确认修改
  const handleSubmit = () => {
    if (isOrderType.value == 1) {
      editClientInfo(form.value).then((res) => {
        uni.showToast({
          icon: 'none',
          title: '保存成功，请重新点击生成电子合同',
        })
        uni.navigateBack()
      })
    } else {
      let formVal = form.value

      channelCarLicenseDetail({
        channelCarLicenseNo: formVal.channelCarLicenseNo,
        accountId: formVal.accountId,
      }).then((res) => {
        let queryParam = res.result
        queryParam.relationCarId = formVal.carId
        saveLicense(queryParam).then(() => {
          uni.showToast({
            icon: 'none',
            title: '保存成功，请重新点击生成电子合同',
          })
          uni.navigateBack()
        })
      })
    }
  }
  // 详情
  const getContractDetail = (id) => {
    if (isOrderType.value == 1) {
      clientInfoDetail({ id: id }).then((res) => {
        const result = res.result
        form.value = result
      })
    } else {
      if (orderType.value == 2) {
        getShortOrdrDetailsAPI({ id: id }).then((res) => {
          const result = res.result
          let memberInfo = result.orderInfo
          let orderInfo = result.orderInfo
          form.value = { ...memberInfo, ...orderInfo }
        })
      } else {
        getOrdrDetailsAPI({ id: id }).then((res) => {
          const result = res.result
          let memberInfo = result.orderInfo
          let orderInfo = result.orderInfo
          form.value = { ...memberInfo, ...orderInfo }
        })
      }
    }
  }
  onLoad((options) => {
    let id = options.id
    isOrderType.value = options.isOrderType
    orderType.value = options.orderType
    if (id) {
      getContractDetail(id)
    }
  })
</script>
<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    .order-create-content {
      padding: 24rpx;
      padding-bottom: 125rpx;
    }
  }
  .info-tip {
    background: #e8f3ff;
    font-size: 24rpx;
    line-height: 44rpx;
    padding: 18rpx 32rpx;
    color: #1d2129;
  }
  .lease-period-rentdays {
    font-size: 30rpx;
    color: #3072f6;
    margin-top: 8rpx;
  }
  .rent-days {
    font-size: 30rpx;
    text-align: right;
    color: #3072f6;
  }
  #footer-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 100;
    /deep/ .ve-button {
      padding: 0;
    }
  }
  .edit-lease-return {
    /deep/ .form-item-type {
      .ve-form-item__border {
        display: none;
      }
    }
    /deep/ .ve-card {
      box-shadow: none;
    }
    /deep/.ve-card-header {
      display: none;
    }
    /deep/ .ve-card-content {
      padding: 0;
    }
    /deep/ .ve-card-header-border-line {
      display: none;
    }
    .edit-lease-return-border {
      margin-top: 10rpx;
      height: 2rpx;
      width: 100%;
      background: rgba(216, 216, 216, 0.3);
    }
  }
</style>
